<template>
  <!-- 生产单添加 -->
  <div class="contractInfo box">
    <el-divider content-position="left">{{
      $route.query.mode == "add" ? "添加生产单" : "编辑生产单"
    }}</el-divider>
    <div class="formBox">
      <el-form :model="form" :rules="rules" ref="addForm" label-width="auto" label-position="right">
        <!-- <el-form-item label="生产单号" prop="number" required style="width: 100%">
          <p>{{ form.number }}</p>
        </el-form-item> -->
        <el-form-item label="合同" prop="contractId">
          <el-select v-model="form.contractId" placeholder="请选择合同" style="width: 100%" remote filterable
            remote-show-suffix :remote-method="queryContract" :loading="selectContractLoading" clearable @change="changeContract(form.contractId)">
            <el-option v-for="item in contractList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="生产单名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入生产单名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="生产数量" prop="quantity">
          <el-input v-model="form.quantity" placeholder="请输入生产单名称"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="生产状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择生产状态" style="width: 100%" clearable>
            <el-option v-for="item in produceStataus" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="负责人" prop="responsibleId">
          <!-- 添加默认负责人是登录者  编辑的时候可以更改负责人 -->
          <el-select v-model="form.responsibleId" placeholder="请选择负责人" style="width: 100%" clearable>
            <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="生产截止时间" prop="endTime">
          <el-date-picker v-model="form.endTime" type="date" placeholder="请选择生产截止时间" size="default"
            value-format="YYYY-MM-DD" :disabled-date="disabledDate" style="width: 100%" />
        </el-form-item> -->
        <el-form-item label="备注" prop="remark" style="width: 100%">
          <el-input v-model="form.remark" clearable rows="3" type="textarea" placeholder="请输入备注内容"></el-input>
        </el-form-item>
      </el-form>

      <!-- 审核流程项 -->
      <!-- <check-form-item ref="checkFormItem" @setCheckConfig="setCheckConfig" :field="this.form" :checkType="checkType"
        v-if="$route.query.mode == 'add'"></check-form-item> -->

      <div class="button">
        <el-button type="primary" @click="save" :loading="isSaveing">保 存</el-button>
        <el-button @click="cencel">取 消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getNum } from '@/utils/getData'
import { queryTypeByDic } from '@/utils/getData'
import checkFormItem from '@/components/checkProcess/checkFormItem.vue'
export default {
  name: 'customerAdd',
  data() {
    return {
      checkType: 3,//工作流的类型
      isSaveing: false,
      selectContractLoading: false,
      selectLoading: false,
      //表单数据
      form: {
        adminId: '',//跟进人id --登录时id
        departmentId: '',
        contractId: '',
        number: '',//生产单编号
        name: "",//生产单名称
        quantity: '',//生产数量
        status: '',//生产状态
        endTime: '',//生产截止时间
        remark: '',//备注
        // workflowJsonList: []
      },
      produceStataus: [],//生产状态
      contractList: [],//合同列表
      userList: [],
      //验证规则
      rules: {
        name: [
          { required: true, message: '请输入生产单名称' }
        ],
        quantity: [
          { required: true, message: '请输入生产数量' }
        ],
        status: [
          { required: true, message: '请选择生产状态', trigger: 'change' }
        ],
        endTime: [
          { type: 'date', required: true, message: 'Please pick a date', trigger: 'change', },
        ],
        contractId: [
          { required: true, message: '请选择项目', trigger: 'change' }
        ],
        userId: [
          { required: true, message: '请选择负责人', trigger: 'change' }
        ],
        responsibleId: [
          { required: true, message: '请选择负责人', trigger: 'change' }
        ],
      }
    }
  },
  components: {
    checkFormItem
  },
  mounted() {
    this.getNumber()
    this.getContractList()
    this.getUserList()
    this.getType()
    if (this.$route.query.mode == 'edit') {
      this.getProduceOrderById()
    }
  },
  methods: {
    // 选择合同改变值的时候
    changeContract(contractId){
      var contract = this.contractList.find(item=> item.id === contractId)
      this.form.name = contract.name + "-生产单"
    },
    // 获取生产单编号
    getNumber() {
      getNum().then(num => {
        this.form.number = `SCD_${num}`
      })
    },
    // 获取跟进类型
    async getType() {
      this.produceStataus = await queryTypeByDic('produceStatus')
    },
    // 获取合同列表
    async getContractList(val) {
      this.selectContractLoading = true
      let param = {
        limit: 1000,
        page: 1,
        search: val,
        status: 1
      }
      let res = await this.$API.contract.getContracts.get(param)
      this.selectContractLoading = false
      this.contractList = res.data
    },
    // 搜索合同
    queryContract(val) {
      this.getContractList(val)
    },
    // 获取所有用户列表
    async getUserList(val) {
      let data = {
        limit: 1000,
        page: 1,
        search: val
      }
      let res = await this.$API.user.getUserList.get(data)
      this.userList = res.data
    },
    // 搜索用户
    queryUser(val) {
      this.getUserList(val)
    },
    // 审批流配置
    setCheckConfig(list) {
      this.form.workflowJsonList = list
    },
    // 获取送货信息
    async getProduceOrderById() {
      let { data } = await this.$API.produce.getProduceOrderById.post({ id: this.$route.query.id })
      this.form = data
    },

    async save() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let userInfo = this.$TOOL.data.get('USER_INFO')
          this.form.departmentId = userInfo.departmentId
          this.form.adminId = userInfo.userId
          let res = null
          let mode = this.$route.query.mode
          if (mode == 'add') {
            res = await this.$API.produce.addProduceOrder.post(this.form)
          } else if (mode == 'edit') {
            delete this.form.status
            delete this.form.createTime
            delete this.form.updateTime
            res = await this.$API.produce.updateProduceOrder.post(this.form)
          }
          this.isSaveing = false
          if (res.code == 200) {
            this.$emit('success', this.form, this.mode)
            this.closeSelectedTag(this.$route)
            this.$router.push({
              path: '/produce/produceOrderManagement'
            })
            this.$message.success("操作成功")
          } 
        }
      })
    },
    // 设置就日期选择范围  今天之后
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7//如果没有后面的-8.64e7就是不可以选择
    },

    // 取消客户添加
    cencel() {
      this.closeSelectedTag(this.$route)
      this.$router.push({
        path: '/produce/produceOrderManagement'
      })
    },
    //关闭tag
    closeSelectedTag(tag) {
      this.$store.commit("removeViewTags", tag)
      this.$store.commit("removeIframeList", tag)
      this.$store.commit("removeKeepLive", tag.name)
    },
  }

}

</script>
<style lang='scss' scoped>
.box {
  margin: 10px;
}

.formBox {
  padding: 30px;
  background: #fff;

  .el-form {
    width: 100%;
  }
}

.button {
  margin-top: 50px;
  padding-left: 60px;
}

:deep(.el-divider__text) {
  padding: 0 10px;
  font-size: 18px;
  // font-weight: 600;
  background-color: #f6f8f9;
}
</style>